import React from "react";
import Title, { SubTitle } from "./Title";
const ModelCard = () => {
  return (
    <div>
      <div className="text-center">
        <Title>豆包大模型家族</Title>
        <SubTitle>适配多种业务场景，驱动业务增长</SubTitle>
      </div>
      <div className="mt-6">
        <div
          style={{
            background: "url(/card1.png)",
            backgroundSize: "cover",
          }}
          className="px-4 py-5 rounded-xl relative text-white overflow-hidden"
        >
          <div
            className="absolute right-0 top-0 rounded-bl-xl px-2 py-1"
            style={{
              backgroundImage:
                "linear-gradient(270deg, #49B2FF 1.97%, #4679FF 110.53%)",
            }}
          >
            更强能力
          </div>
          <div className="flex items-center gap-2">
            <img src="/card_icon.png" alt="" className="w-10 h-10" />
            <div>豆包通用模型pro</div>
          </div>
          <div>
            字节跳动自研LLM模型专业版，支持128k长文本，全系列可精调，适配丰富场景。
          </div>
        </div>

        <div
          style={{
            background: "url(/card2.png)",
            backgroundSize: "cover",
          }}
          className="px-4 py-5 rounded-xl relative text-white overflow-hidden mt-4"
        >
          <div
            className="absolute right-0 top-0 rounded-bl-xl px-2 py-1"
            style={{
              backgroundImage:
                "linear-gradient(90deg, #3E55FF 0%, #AC7AFF 93.42%)",
            }}
          >
            更低延迟
          </div>
          <div className="flex items-center gap-2">
            <img src="/card_icon.png" alt="" className="w-10 h-10" />
            <div>豆包通用模型lite</div>
          </div>
          <div>
            字节跳动自研LLM模型轻量版，对比专业版提供更低token成本、更低延迟。
          </div>
        </div>
      </div>
    </div>
  );
};

export default ModelCard;
